/**
 *
 * @param {*} context canvas context
 * @param {number} x_width
 * @param {number} y_width
 * @param {number} blur
 */
export function setShadow( context, x_width, y_width, blur ) {
    context.shadowOffsetX = x_width;
    context.shadowOffsetY = y_width;
    context.shadowBlur = blur;
    context.shadowColor = 'black';
}

export function closeShadow( context ) {
    context.shadowColor = "transparent";
    context.shadowBlur = 0;
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 0;
}

export const add_event_listener = ( canvas, str, fn ) => {
    switch ( str ) {
        case 'up': {
            canvas.addEventListener( 'mouseup', fn, false );
            canvas.addEventListener( 'touchend', fn, false );
            break;
        }
        case 'move': {
            canvas.addEventListener( 'mousemove', fn, false );
            canvas.addEventListener( 'touchmove', fn, false );
            break;
        }
        case 'down': {
            canvas.addEventListener( 'mousedown', fn, false );
            canvas.addEventListener( 'touchstart', fn, false );
            break;
        }
    }
}

export const remove_event_listener = ( canvas, str, fn ) => {
    switch ( str ) {
        case 'up': {
            canvas.removeEventListener( 'mouseup', fn, false );
            canvas.removeEventListener( 'touchend', fn, false );
            break;
        }
        case 'move': {
            canvas.removeEventListener( 'mousemove', fn, false );
            canvas.removeEventListener( 'touchmove', fn, false );
            break;
        }
        case 'down': {
            canvas.removeEventListener( 'mousedown', fn, false );
            canvas.removeEventListener( 'touchstart', fn, false );
            break;
        }
    }
}

export const get_device = ( canvas ) => {
    let device = { x: 0, y: 0 }
    let flag = false

    // FIXME : Actually I don't where got wrong...
    //  But the logic is different between mouse and touch.
    //  So it is a good start to handle it from events.
    canvas.addEventListener( 'mousemove', e => {
        device.x = e.pageX - canvas.offsetLeft
        device.y = e.pageY - canvas.offsetTop
        flag = true
    } );
    canvas.addEventListener( 'touchmove', ee => {
        if ( flag ) {
            return
        }
        ee.preventDefault()

        let e = ee.touches[ 0 ]
        device.x = e.pageX - canvas.offsetLeft
        device.y = e.pageY - canvas.offsetTop
        flag = true
    } );

    return device
}

/**
 *
 * @param {number} value
 * @param {number} l
 * @param {number} r
 * @brief Check if value in [l, r)
 */
export function inRange( value, l, r ) {
    // console.log("inRange", value, l, r);
    return l <= value && value < r;
}

/**
 *
 * @param {number} l
 * @param {number} r
 * @param {number} x
 * @param {number} y
 * @brief Check if subset between [l, r) and [x, y)
 */
export function isRangesCollide( l, r, x, y ) {
    if ( l < x ) {
        return inRange( x, l, r );
    } else {
        return inRange( l, x, y );
    }
}


/**
 * 
 * @param {String} text 
 * @brief Copy `text` to clipboard.
 */
export function copyText(text) {
    var element = createElement(text);
    element.select();
    element.setSelectionRange(0, element.value.length);
    document.execCommand('copy');
    element.remove();
    alert("已复制到剪切板");
}

//创建临时的输入框元素
function createElement(text) {
    var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
    var element = document.createElement('textarea');
    // 防止在ios中产生缩放效果
    element.style.fontSize = '12pt';
    // 重置盒模型
    element.style.border = '0';
    element.style.padding = '0';
    element.style.margin = '0';
    // 将元素移到屏幕外
    element.style.position = 'absolute';
    element.style[isRTL ? 'right' : 'left'] = '-9999px';
    // 移动元素到页面底部
    let yPosition = window.pageYOffset || document.documentElement.scrollTop;
    element.style.top = `${yPosition}px`;
    //设置元素只读
    element.setAttribute('readonly', '');
    element.value = text;
    document.body.appendChild(element);
    return element;
}